<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>会员注册</title>
	<link rel="stylesheet" href="__STATIC__/index/css/toast.css">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<!-- <script type="text/javascript" src="https://raw.githubusercontent.com/emn178/js-md5/master/src/md5.js"></script> -->
	<script type="text/javascript" src="__STATIC__/index/js/toast.js"></script>
	<script type="text/javascript" src="__STATIC__/index/js/md5.js"></script>
	<!-- <script src="/static/index/js/md5.js"> </script> -->
	<style>
		html,
		body {
			margin: 0 auto;
		}

		#container {
			height: 100vh;
			background: #fff;
		}

		.page_topbar {
			position: relative;
			height: 45px;
			background: #f9f9f9;
			border-bottom: 1px solid #e8e8e8;
			font-size: 16px;
			line-height: 45px;
			text-align: center;
		}

		.page_topbar a.back {
			position: absolute;
			left: 15px;
			height: 45px;
			line-height: 45px;
			display: block;
			color: #282828;
			font-size: 24px;
		}

		.page_topbar .title {
			border-bottom: 1px solid #efefef;
			background: white;
			height: 45px;
			line-height: 45px;
			color: #000;
			text-align: center;
		}

		.info_main {
			height: auto;
			background: #fff;
			margin-top: 30px;
		}

		.info_main .line {
			margin: 0 3% 15px 3%;
			height: 40px;
			border: 1px solid #e8e8e8;
			line-height: 40px;
			color: #999;
			padding: 2px 0;
			box-sizing: content-box;
			position: relative;
		}

		.info_main .line .title {
			height: 40px;
			width: 40px;
			line-height: 40px;
			color: #444;
			float: left;
			font-size: 16px;
		}

		.info_main .line .title img {
			width: 30px;
			height: 30px;
			vertical-align: top;
			padding: 2px 0 0 5px;
			box-sizing: content-box;
		}

		.info_main .line .info {
			width: 100%;
			float: right;
			margin-left: -40px;
		}

		.info_main .line .inner {
			margin-left: 40upx;
		}

		.info_main .line .inner input {
			height: 38px;
			width: 80%;
			display: block;
			padding: 0 0 0 30px;
			margin: 0px;
			border: 0px;
			float: left;
			font-size: 16px;
			color: #666;
			background: #fff;
			outline: none;
		}

		#btnSendCode {
			position: absolute;
			right: 0;
			top: 0;
			background: #0F8DE9;
			border: none;
			width: 25%;
			height: 100%;
			color: #fff;
			margin-right: 3%;
			text-align: center;
			font-size: 30upx;
		}

		#btnSendCode>div {
			width: 66px !important;
		}

		.register {
			height: 44px;
			margin: 14px 3%;
			background: #0F8DE9;
			border-radius: 4px;
			text-align: center;
			font-size: 16px;
			line-height: 44px;
			color: #fff;
		}

		#tip {
			display: none;
			opacity: 0.7;
			width: 40%;
			height: 40px;
			line-height: 40px;
			background: #585858;
			color: #fff;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}

		#think_page_trace {
			width: 0px !important;
			height: 0px !important;
		}

		#think_page_trace_tab {
			width: 0px !important;
			height: 0px !important;
		}

		#think_page_trace_tab {
			width: 0px !important;
			height: 0px !important;
		}

		#think_page_trace_tab_tit {
			width: 0px !important;
			height: 0px !important;
		}

		#think_page_trace_tab_tit>span {
			width: 0px !important;
			height: 0px !important;
		}

		#think_page_trace_tab_cont {
			width: 0px !important;
			height: 0px !important;
		}

		#think_page_trace_tab_tit>span {
			display: none !important;
		}

		#think_page_trace_open {
			width: 0px !important;
			height: 0px !important;
		}
		.weixin-tip{
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			color:#fff;
			font-size:22px;
			background: rgba(0, 0, 0, 0.8);
			/*filter: alpha(opacity=80);*/
			height: 100%;
			width: 100%;
			z-index: 100;
		}

		.weixin-tip p {
			text-align: center;
			margin-top: 10%;
			padding: 0 5%;
		}
		.weixin_text{ position:absolute; margin-top:100px;  width:100%; }
	</style>
</head>

<body>
	<div id="container">
		<div class="page_topbar">

			<!-- <a href="javascript:;" class="back" onclick="history.back()">
				<i class="fa fa-angle-left"></i>
			</a> -->

			<div class="title">会员注册</div>

		</div>

		<div class="info_main">
			<div class="line">
				<span style="color:#000;padding: 0 0 0 30px;">推荐人id：</span>
				<span id="recommend_id" style="color:#d01f1f"></span>
			</div>
			<!-- <div class="line">
				<div class="info">
						推荐人id：
					<div class="inner">
						<input type="text" id="recommend_id" placeholder="推荐人id：" value="">
					</div>
				</div>
			</div> -->

			<div class="line">
				<div class="title">

				</div>
				<div class="info">
					<div class="inner">
						<input type="text" id="mobile" placeholder="请输入您的手机号码" value="">
					</div>
				</div>
			</div>



			<div style="position: relative;">

				<div class="line" style="width: 67%;">
					<div class="title">

					</div>
					<div class="info">
						<div class="inner">
							<input type="text" id="code" placeholder="请输入验证码" value="">
						</div>
					</div>
				</div>

				<input id="btnSendCode" type="button" value="发送验证码">

			</div>


			<div class="line">
				<div class="title">

				</div>
				<div class="info">
					<div class="inner">
						<input type="realname" id="realname" placeholder="请输入您的姓名" value="">
					</div>
				</div>
			</div>

			<div class="line">
				<div class="title">

				</div>
				<div class="info">
					<div class="inner">
						<input type="password" id="password" placeholder="请输入您的密码" value="">
					</div>
				</div>
			</div>



			<div class="line">
				<div class="title">

				</div>
				<div class="info">
					<div class="inner">
						<input type="password" id="cpassword" placeholder="请确认密码" value="">
					</div>
				</div>
			</div>

		</div>

		<div class="register">注册</div>

	</div>
	<div id="tip"></div>
	<div class="weixin-tip" id="weixinTip">
		<div class="weixin_text">
				<p>
					1、点击右上角按钮
				</p>
				<p>
					
					2、选择在浏览器中打开
				</p>
		</div>
	</div>
</body>

<script>
	$(function () {
		console.log(document.getElementsByTagName("head")[0]);
		var recommend_id;
		function getUrlVars() { //获取多个参数数组
			var vars = [];
			var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
			for (var i = 0; i < hashes.length; i++) {
				hash = hashes[i].split('=');
				// console.log(hash)
				vars.push(hash[1]);
				vars[hash[0]] = hash[1];
			}
			return vars;
		}
		// console.log(getUrlVars(location.href));
		var id = getUrlVars(location.href);
		for (var i = 0; i < id.length; i++) {
			// console.log(id[i])
			recommend_id = id[i];
			// console.log(recommend_id)
		}
		// console.log(recommend_id);
		$("#recommend_id").html(recommend_id);
		$('.register').click(function () {
			
			var myreg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
			var namereg = /^([\u4E00-\u9FA5]|[a-zA-Z]|[?=.*\d]|[?=.*[a-zA-Z]]|[?=.*[\W_]]){2,9}$/; //(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_])
			var pswreg = /^([a-zA-Z]|[?=.*\d]|[?=.*[a-zA-Z]]|[?=.*[\W_]]){6,18}$/;
			var codereg = /^[\d]{4}$/;
			if ($('#mobile').val() == "") {
				showMessage('手机号不能为空！');
				return;
			} else if (!myreg.test($('#mobile').val())) {
				showMessage('手机格式不正确空！');
			} else if ($('#code').val() === '') {
				showMessage('验证码不能为空！');
			} else if ($('#realname').val() === "") {
				showMessage('名字不能为空！');
			} else if (!namereg.test($('#realname').val())) {
				showMessage('名字长度为2-9！');
			} else if ($('#password').val() === "") {
				showMessage('密码不能为空！');
			} else if (!pswreg.test($('#password').val())) {
				showMessage('密码长度为6-18！');
			} else if ($('#cpassword').val() === "") {
				showMessage('请再次输入密码！');
			} else if ($('#cpassword').val() !== $('#password').val()) {
				showMessage('两次密码不一致！');
			} else {
				//发送请求	///login/register //https://www.qyzf.xyz/api/login/register
				$.ajax({
					url: "https://www.taoyiapp.com/api/login/register",
					data: {
						recommend_id: recommend_id,
						phone: $("#mobile").val(),
						password: md5($("#password").val()),
						real_name: $("#realname").val(),
						code: $("#code").val(),
					},
					type: "POST",
					dataType: "json",
					success: function (res) {
						console.log(res.code, res.message)
						if (res.code == 200) {
							showMessage(res.message);
							location.href='https://www.taoyiapp.com/index/Login/download/';
						} else if (res.code == '-1') {
							showMessage(res.message);
						}
					}
				});
			}
		});
		$("#btnSendCode").on("click", function () {
			sendCode();
		});
		var codeka = false;
		var InterValObj; //timer变量，控制时间
		var count = 60; //间隔函数，1秒执行
		function sendCode() {
			// event.preventDefault();
			var myreg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
			if ($("#mobile").val() == "") {
				showMessage("请输入手机号!");
				return
			}
			if (!myreg.test($("#mobile").val())) {
				showMessage("请输入正确的手机号!");
				return
			}
			if (codeka == true) {
				return
			} else {
				InterValObj = window.setInterval(function () {
					// console.log(count);
					if (count == 0) {
						window.clearInterval(InterValObj); //停止计时器
						// $("#btnSendCode").getAttribute("disabled");//启用按钮
						$("#btnSendCode").val("发送验证码");
					} else {
						count--;
						codeka = true;
						$("#btnSendCode").val(count + "秒重新发送");
					}
				}, 1000)
				$.ajax({
					url: "https://www.taoyiapp.com/api/Msn/index",
					data: {
						"mobile": $("#mobile").val(),
						"type": 'register',
					},
					type: "POST",
					dataType: "json",
					success: (res) => {
						if (res.code == '-1') {
							showMessage('发送失败!');
						} else if (res.code == '1') {
							showMessage('发送成功!');
							// $("#tip").show(500).html('发送成功').hide(1500).stop();
						}
					}
				});
			}
		};
	});
</script>
<script>

	window.onload = function () {

		var winHeight = document.body.clientHeight;
		var ua = navigator.userAgent.toLowerCase();
		var isWeixin = (ua.match(/MicroMessenger/i) == "micromessenger");
		if (isWeixin) {
			var weixinImg = document.getElementById("weixinImg");
			
			var weixinTip = document.getElementById("weixinTip");
			weixinTip.style.height = winHeight;
			weixinTip.style.display = "block";
		}
	}


</script>

</html>